<!DOCTYPE html>
<html ng-app="notesApp">
	<head>
		<meta charset="UTF-8">
		<title>Notes App</title>
		<style type="text/css">
			.done{
				background-color: green;
			}
			.pending{
				background-color: red;
			}
		</style>
	</head>
	<body ng-controller="MainCtrl as ctrl">
		<div ng-repeat="note in ctrl.notes" ng-class="ctrl.getNoteClass(note.done)">
			<span class="label">{{note.label}}</span>
			<span class="assignee" ng-show="note.assignee">{{note.assignee}}</span>
		</div>
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		angular.module('notesApp', []).controller('MainCtrl', function(){
			var self = this;
			self.notes = [
				{label: 'First Note', done: false, assignee: 'Shyam'},
				{label: 'Second Note', done: false},
				{label: 'Third Note', done: true},
				{label: 'Forth Note', done: false, assignee: 'Brad'}
			];
			
			self.getNoteClass = function(status){
				return {
					done: status,
					pending: !status
				};
			};
		});
	</script>
</html>
